<template>
  <!-- 短信验证登陆 -->
  <div class="textLogin">
    <i class="iconfont icon-diannaojiaobiao" @click="first"></i>
    <h1 class="animate__animated animate__flash">短信登入</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
        <span
          class="yan"
          @click="sendSms"
          v-text="msg"
          style="text-decoration: underline; user-select: none"
          :disabled="flag"
        ></span>
      </el-form-item>

      <el-form-item label="验证码" prop="captcha">
        <el-input v-model="ruleForm.captcha" type="text"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 校验验证码
var validateCaptcha = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback("请输入验证码");
  }
};
// 校验手机号
var validateUsername = (rule, value, callback) => {
  // 3-16位字母数字下划线正则
  var uPattern =
    /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("请输入正确的手机号");
  }
};
import * as api from "@/api/users";
import storage from "@/utils/storage";
import router from "@/router";
export default {
  data() {
    return {
      msg: "发送验证码",
      flag: true,
      name: "convention",
      ruleForm: {
        username: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    storageUserInfo({ userInfo, token, permission }) {
			// 将信息存到vuex
			this.$store.commit('users/SET_USEINFO', userInfo)
			storage.set('userInfo', userInfo)
			storage.set('qf-token', token)
			storage.set('permission', permission)
		},
    async submitForm() {
      let res = await api.smsLogin(this.ruleForm.captcha);
      // storage.storageUserInfo(res.data);
      this.storageUserInfo(res.data);
      this.$router.push("/");
    },
    first() {
      this.$emit("first", this.name);
    },

    // 点击发送验证码
    async sendSms() {
      if (this.flag) {
        // 调用接收获取手机验证码
        let res = await api.getSmsCode(this.ruleForm.username);
        // 短信发送成功
        if (res.data.state) {
          this.$message({
            type: "success",
            message: "短信发送成功",
          });
        } else {
          this.$message.error(res.data.msg);
        }
        this.flag = false;
        let delay = 5;
        this.msg = `${delay}秒后重新发送`;
        this.interval = setInterval(() => {
          delay--;
          if (delay < 1) {
            this.msg = "点击发送验证码";
            clearInterval(this.interval);
            this.flag = true;
          } else {
            this.msg = `${delay}秒后重新发送`;
          }
        }, 1000);
      }
    },
  },
};
</script>
<style lang="less" scoped>
// 短信登陆
.textLogin {
  .icon-diannaojiaobiao {
    font-size: 80px;
    top: 0;
    right: 0;
    color: #b0b0b0;
    position: absolute;
  }
  h1 {
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
  }
  .el-form {
    .el-form-item {
      /deep/ .el-form-item__label {
        color: #fff;
      }
      /deep/ .el-form-item__content {
        .el-button {
          width: 236px;
          padding: 12px 20px;
          background: linear-gradient(to right, #1196fb, blue);
          height: 44px;
          width: 270px;
        }
        .el-input {
          width: 238px;
          height: 38px;
          .el-input__inner {
            height: 44px;
            width: 270px;
          }
        }
      }
    }
    /deep/ .el-form-item:nth-of-type(1) {
      .el-form-item__content {
        position: relative;
        .yan {
          display: inline-block;
          width: 120px;
          height: 44px;
          background-color: #fff;
          border-left: none;
          text-align: center;
          line-height: 44px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          cursor: pointer;
          position: absolute;
          top: 0;
        }
        .el-input {
          width: 150px;
          .el-input__inner {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border: none;
            height: 44px;
            width: 150px;
          }
        }
      }
    }
  }
}
</style>
